<template>
    <div>
        <template v-for="(item, index) in menuList">
            <div style="text-align: center;" :key="index">
                <Dropdown   v-if="item.children.length >= 1&&item.children[0].name!=='home_index'" placement="right-start" :key="index" @on-click="changeMenu">
                    <Button  type="text">
                        <Icon :size="20" :color="iconColor" :type="item.icon"></Icon>
                    </Button>
                    <DropdownMenu  slot="list">
                        <template v-for="(child, i) in item.children">
                            <DropdownItem v-if="!child.children" :name="child.name" :key="i"><Icon :type="child.icon"></Icon><span style="padding-left:10px;">{{ itemTitle(child) }}</span></DropdownItem>
                            <shrinkthirdmenu v-else :obj="child"></shrinkthirdmenu>
                        </template>
                    </DropdownMenu>
                </Dropdown>
                <Dropdown   v-else placement="right-start" :key="index" @on-click="changeMenu">
                    <Button @click="changeMenu(item.children[0].name)"  type="text">
                        <Icon :size="20" :color="iconColor" :type="item.icon"></Icon>
                    </Button>
                    <DropdownMenu  slot="list">
                        <DropdownItem v-if="!item.children[0].children" :name="item.children[0].name" :key="'d' + index"><Icon :type="item.icon"></Icon><span style="padding-left:10px;">{{ itemTitle(item.children[0]) }}</span></DropdownItem>
                        <shrinkthirdmenu v-else :obj="child"></shrinkthirdmenu>
                    </DropdownMenu>
                </Dropdown>
            </div>
        </template>
    </div>
</template>

<script>
import shrinkthirdmenu from './sidebarMenuShrink3'
export default {
    name: 'sidebarMenuShrink',
    components:{
        shrinkthirdmenu
    },
    props: {
        menuList: {
            type: Array
        },
        iconColor: {
            type: String,
            default: 'darck'
        },
        menuTheme: {
            type: String,
            default: 'white'
        }
    },
    methods: {
        changeMenu (active) {
            this.$emit('on-change', active);
        },
        itemTitle (item) {
            if (typeof item.title === 'object') {
                return this.$t(item.title.i18n);
            } else {
                return item.title;
            }
        }
    }
};
</script>
